<template>
  <div class="app-container">
    <!-- <div class="table-button">
      <sec-button type="primary" @click="onEdit">修改</sec-button>
    </div> -->
    <div class="query-table">
      <sec-card
        class="detailForm"
        shadow="never"
        :body-style="{ padding: '0px' }"
      >
        <ul>
          <li><label>账号</label>{{ userInfo.username }}</li>
          <li><label>手机号</label>{{ userInfo.phone }}</li>
          <li>
            <label>创建时间</label>
            {{ userInfo.createTime }}
          </li>
        </ul>
        <ul>
          <li><label>姓名</label>{{ userInfo.nickName }}</li>
          <li><label>邮箱</label>{{ userInfo.email }}</li>
          <li><label>角色</label>{{ roleName }}</li>
        </ul>
      </sec-card>
    </div>
    <InfoModelForm
      :form-visible="formVisible"
      :user-info="userInfo"
      @getInfo="getInfo"
      @closeDetailForm="
        () => {
          formVisible = false
        }
      "
    />
  </div>
</template>

<script>
import http from '@/utils/http'
import moment from 'moment'
import InfoModelForm from './components/infoModelForm.vue'

export default {
  name: 'Report',
  components: { InfoModelForm },
  data() {
    return {
      userInfo: {},
      formVisible: false
    }
  },
  computed: {
    roleName() {
      const { roleList = [] } = this.userInfo || {}
      return roleList.map((role) => role.roleName).join(',')
    }
  },
  created() {
    this.moment = moment
    this.getInfo()
  },
  methods: {
    onEdit() {
      this.formVisible = true
    },
    getInfo() {
      http.getAcountSelf({}).then(({ data }) => {
        this.userInfo = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.table-button {
  margin-bottom: 8px;
}
.query-table {
  background-color: #fff;
  padding: 0 16px;
}
.detailForm.el-card {
  border: none;
  padding: 30px 0 6px;
  .el-card__body {
    display: flex;
    width: 100%;
    padding: 0;
    ul {
      display: inline-flex;
      width: 50%;
      flex-direction: column;
      margin: 0;
    }
    li {
      font-size: 14px;
      line-height: 16px;
      list-style: none;
      margin-bottom: 24px;
      label {
        margin-right: 8px;
        display: inline-block;
        color: #8c8c8c;
        &::after {
          content: ' : ';
        }
      }
    }
  }
}
</style>
